"use client";

import Link from "next/link";
import Image from "next/image";
import { Card, CardContent } from "@/components/ui/card";

interface RelatedVideo {
  id: string;
  title: string;
  thumbnailUrl: string;
  duration: string;
  viewCount: string;
  publisherName: string;
}

interface RelatedVideosProps {
  videos: RelatedVideo[];
}

export default function RelatedVideos({ videos }: RelatedVideosProps) {
  return (
    <div className="bg-white rounded-lg shadow-sm p-4">
      <h2 className="text-lg font-bold mb-4">相关推荐</h2>
      <div className="space-y-4">
        {videos.map((video) => (
          <Link key={video.id} href={`/video/${video.id}`}>
            <Card className="overflow-hidden border-none hover:bg-gray-50 transition-colors">
              <div className="flex">
                <div className="relative w-40 h-24 flex-shrink-0">
                  <Image
                    src={video.thumbnailUrl}
                    alt={video.title}
                    fill
                    className="object-cover rounded-l-lg"
                  />
                  <span className="video-card-duration">{video.duration}</span>
                </div>
                <CardContent className="p-3 flex-1">
                  <h3 className="text-sm font-medium line-clamp-2 h-10">{video.title}</h3>
                  <div className="flex flex-col mt-1">
                    <span className="text-xs text-gray-500 truncate">{video.publisherName}</span>
                    <div className="flex items-center mt-0.5 text-xs text-gray-500">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="w-3 h-3 mr-1"
                      >
                        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
                        <circle cx="12" cy="12" r="3" />
                      </svg>
                      <span>{video.viewCount}</span>
                    </div>
                  </div>
                </CardContent>
              </div>
            </Card>
          </Link>
        ))}
      </div>

      {/* Ad or premium content banner */}
      <div className="mt-6 relative rounded-lg overflow-hidden">
        <div className="relative aspect-video w-full">
          <Image
            src="https://ext.same-assets.com/3979703616/967599304.avif"
            alt="Premium content"
            fill
            className="object-cover"
          />
          <div className="absolute top-2 right-2 bg-yellow-500 text-white text-xs px-1.5 py-0.5 rounded">
            广告
          </div>
        </div>
        <div className="p-3 bg-gradient-to-t from-black/80 to-transparent absolute bottom-0 left-0 right-0 text-white">
          <h3 className="text-sm font-medium">成为大会员，享受更多福利</h3>
          <p className="text-xs mt-1">无广告、高清1080P、专属活动</p>
        </div>
      </div>

      <div className="mt-6">
        <h2 className="text-lg font-bold mb-4">精选合集</h2>
        <div className="space-y-2">
          {["美国文化探索", "全球医疗系统对比", "生活百科知识"].map((title, index) => (
            <Link
              key={index}
              href="#"
              className="flex items-center p-2 hover:bg-gray-50 rounded-md transition-colors"
            >
              <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center mr-3 text-gray-600 flex-shrink-0">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="w-4 h-4"
                >
                  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
                </svg>
              </div>
              <div>
                <h3 className="text-sm font-medium">{title}</h3>
                <p className="text-xs text-gray-500">10个视频</p>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}
